<template>
  <div>
    <div :class="[belong !== 3 ? 'top-tabs' : 'top-taps-active']">
      <div class="tabs tabs-space-between" style="margin-top: 20px">
        <div class="tabs">
          <span
            class="top-tabs-btn"
            :class="[belong === 3 ? 'top-tabs-btn-active1' : 'top-tabs-btn1']"
            @click="changeClassifies(3)"
            >{{ $t("common.mxrRepertory") }}</span
          >
          <span
            class="top-tabs-btn"
            :class="[belong === 1 ? 'top-tabs-btn-active2' : 'top-tabs-btn2']"
            @click="changeClassifies(1)"
            >{{ $t("common.privRepertory") }}</span
          >
          <span
            class="top-tabs-btn"
            :class="[
              belong == undefined ? 'top-tabs-btn-active3' : 'top-tabs-btn3',
            ]"
            @click="changeClassifies(undefined)"
            >{{ $t("common.cusRepertory") }}</span
          >
          <div
            style="
              position: relative;
              top: -20px;
              right: 28px;
              width: 26px;
              height: 26px;
              background: red;
              border-radius: 50%;
              text-align: center;
              line-height: 26px;
            "
            v-if="count > 0"
          >
            <span style="color: white; font-size: 14px">{{ count }}</span>
          </div>
        </div>

        <div class="tabs" v-if="belong === undefined">
          <input
            class="search-input"
            type="text"
            v-model="keyWord"
            :placeholder="$t('resource.searchPlaceholder')"
          />
          <span class="search-btn" @click="onSearchResource">
            {{ $t("common.search") }}
          </span>
        </div>
      </div>
    </div>
    <div
      ref="typeContainer"
      style="
        display: flex;
        justify-content: space-between;
        width: 95%;
        margin: 0 auto;
        min-height: 640px;
      "
      v-if="
        (classifies && classifies.length > 0 && belong === 1) || belong === 3
      "
    >
      <div class="middle" :class="[importRes ? 'middle-import-res' : '']">
        <div
          class="classifies-detail"
          v-for="(item, index) in classifies"
          :key="index"
          @click="onJumpToResList(item.name, item.resourceType)"
        >
          <img :src="item.url" @load="handleLoad2" @dragstart="imgdragstart" />
          <span>{{ item.name }}</span>
        </div>
      </div>
      <Selected v-if="importRes" />
    </div>
    <div v-else-if="belong === 3 || belong === undefined">
      <ResList
        ref="list"
        :orderType="orderType"
        :belong="belong"
        :support="support"
        :sub="subType"
        :userId="userId"
        :resourceName="resourceName"
        :importRes="importRes"
        :language="language"
        :list="list"
        :pid="pid"
        :has-res="hasRes"
        :page="page"
        :total="total"
        :on-change-page="onChangePageInfo"
      />
    </div>
    <div class="no-result" ref="noResult" v-else>
      <div>
        <img src="../../assets/images/pix_noresults.png" />
        <span>{{ $t("shoppingCartOrder.noOrderData") }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Selected from "./SelectedResList";
import ajax from "../../common/ajax";
import api from "../../common/api";
import ResourceList from "../../pages/resources/ResourceList";
import ResSort from "../res-list/ResSort";
import ResList from "../res-list/ResList";
import encryption from "../../common/encryption";
import { Result } from "element-ui";
let userId;
let language;
let pressId;

export default {
  name: "Classify",
  props: ["importRes"],
  components: { Selected, ResourceList, ResSort, ResList },
  data() {
    return {
      belong: 1,
      classifies: [
        {
          resourceType: 0,
          name: "普通模型",
          url: require("../../assets/images/编组 2.png"),
        },
        {
          resourceType: 12,
          name: "网页模型",
          url: require("../../assets/images/编组 3.png"),
        },
        {
          resourceType: 2,
          name: "自定义模型",
          url: require("../../assets/images/编组 4.png"),
        },
        {
          resourceType: 14,
          name: "二级节点模型",
          url: require("../../assets/images/编组 5.png"),
        },
        {
          resourceType: 3,
          name: "视频",
          url: require("../../assets/images/编组 9.png"),
        },
        {
          resourceType: 4,
          name: "图片",
          url: require("../../assets/images/编组 8.png"),
        },
        {
          resourceType: 9,
          name: "音频",
          url: require("../../assets/images/编组 7.png"),
        },
        {
          resourceType: 5,
          name: "网页链接",
          url: require("../../assets/images/编组 6.png"),
        },
      ],
      keyWord: "",
      resourceName: "",
      // 子分类
      sub: [],
      // 资源类别
      resList: [],
      // 是否有资源列表
      hasRes: false,
      // 分类名称
      pName: "",
      // 资源总数
      total: 0,
      // 资源每页资源数量
      pageSize: 12,
      // 资源第几页
      page: 1,
      // 选择资源高度
      selectedResHeight: 0,
      // 支持类型
      support: -1,
      // 用户ID
      userId: -1,
      // 父分类ID
      pid: -1,
      // 语言环境
      language: "zh-cn",
      // 子分类类型
      subType: -1,
      // 排序方式
      orderType: "",
      // 第三方分类数据
      description: "",
      list: [],
      response: [],
    };
  },
  computed: {
    count() {
      return this.$store.state.cartShop.haveNum;
    },
  },
  created() {
    userId = this.$route.query.userId;
    language = this.$route.query.culture;
    pressId = this.$route.query.pressId;
    this.userId = this.$route.query.userId;
    this.$store.dispatch("cartShop/saveHave", userId);
  },
  methods: {
    imgdragstart(e) {
      e.preventDefault();
    },
    handleLoad2() {
      if (this.$route.name === "ImportHome") {
        document.getElementById("mySelected").style.height = "906px";
      }
    },
    /**
     * 改变资源排序方式
     *
     * @param type 排序方式
     */
    onChangeOrder(type) {
      this.orderType = type;
      getResources(1, this);
    },
    /**
     * 改变分页信息
     *
     * @param e 分页下标
     */
    onChangePageInfo(e) {
      getResources(e, this);
    },
    changeClassHave(e) {},
    changeClassifies(belong) {
      this.belong = belong;
      if (belong === 3) {
        getResources(1, this);
      } else if (belong === 1) {
        getResources(1, this);
      } else if (belong == undefined) {
        getResources(1, this);
      }
    },
    onJumpToResList(name, resourceType) {
      this.$router.push({
        path: "/list",
        query: {
          name: name,
          resourceType: resourceType,
          belong: this.belong,
          importRes: this.importRes,
          userId: userId,
          selected: true,
        },
      });
    },
    goBack() {
      getResources(1, this);
    },
    onSearchResource() {
      let that = this;
      ajax.get({
        url: api.resource.privateRouteName + api.resource.children.usr,
        data: {
          userId: userId,
          keyWord: this.keyWord,
          pageNo: 1,
          pageSize: 12,
        },
        success(res) {
          this.response1 = JSON.parse(encryption.decryptionMxr(res));
          console.log(11);
          that.hasRes =
            this.response1.list !== null && this.response1.list.length > 0;
          that.$store.commit("resources/initDbResources", {
            resList: this.response1.list || [],
            importRes: that.importRes,
          });
          that.total = this.response1.total;
        that.$children[0].loading = false;
          that.page = page;
        },
        fail(res) {},
      });
    },
  },
};

/**
 * 根据不同条件进行资源筛选
 * @param page 页数
 * @param that VUE对象
 */
function getResources(page, that) {
  console.log(page);
  if (that.belong == undefined) {
    ajax.get({
      url: api.resource.privateRouteName + api.resource.children.usr,
      data: {
        userId: userId,
        pageSize: 12,
        pageNo: page,
      },
      success(res) {
        this.response = JSON.parse(encryption.decryptionMxr(res));
        that.hasRes =
          this.response.list !== null && this.response.list.length > 0;
        that.$store.commit("resources/initDbResources", {
          resList: this.response.list || [],
          importRes: that.importRes,
        });
        that.total = this.response.total;
        that.page = page;
        that.$children[0].loading = false;
      },
      fail(res) {},
    });
  } else {
    // ajax.get({
    //   url: api.resource.privateRouteName + api.resource.children.list,
    //   data: {
    //     userId: userId,
    //     resourceType: that.resourceType,
    //     belong: that.belong,
    //   },
    //   success(res) {
    //     encryption.decryptionMxr(res);
    //     this.response = JSON.parse(encryption.decryptionMxr(res));
    //     console.log(11)
    //     that.hasRes =
    //       this.response.list !== null && this.response.list.length > 0;
    //     that.$store.commit("resources/initDbResources", {
    //       resList: this.response.list || [],
    //       importRes: that.importRes,
    //     });
    //     that.total = this.response.total;
    //     that.page = page;
    //   },
    //   fail(res) {},
    // });
  }
}
</script>

<style scoped>
.top-tabs,
.top-taps-active {
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 20px;
  border-bottom: 1px solid #cccccc;
}

.top-taps-active {
  border-bottom: 0;
}

.tabs {
  display: flex;
  align-items: center;
}

.tabs-space-between {
  justify-content: space-between;
  flex-wrap: wrap;
}

.top-tabs-label {
  font-size: 28px;
  color: #4381e6;
}

.top-tabs-btn {
  width: 150px;
  height: 46px;
  border-radius: 4px;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  line-height: 49px;
  cursor: pointer;
}

.top-tabs-btn1 {
  background: url("../../assets/images/btn_resourcestore_nor.png") no-repeat;
  padding-left: 10px;
}

.top-tabs-btn-active1 {
  background: url("../../assets/images/btn_resourcestore_sel.png") no-repeat;
  padding-left: 10px;
}

.top-tabs-btn2 {
  background: url("../../assets/images/btn_privatelibraries_nor.png") no-repeat;
  padding-left: 10px;
}

.top-tabs-btn-active2 {
  background: url("../../assets/images/btn_privatelibraries_sel.png") no-repeat;
  padding-left: 10px;
}

.top-tabs-btn3 {
  background: url("../../assets/images/btn_customlibrary_nor.png") no-repeat;
  padding-left: 10px;
}

.top-tabs-btn-active3 {
  background: url("../../assets/images/btn_customlibrary_sel.png") no-repeat;
  padding-left: 10px;
}

.search-input {
  height: 25px;
  padding: 10.5px 20px;
  border: 2px solid #cccccc;
  border-radius: 4px;
  font-size: 18px;
  color: #999999;
}

.search-btn {
  width: 77px;
  height: 43.2px;
  background: #4381e6;
  border-radius: 4px;
  margin-left: 18px;
  cursor: pointer;
  color: white;
  text-align: center;
  line-height: 43.2px;
  font-size: 18px;
}

.search-btn img {
  display: block;
  width: 35px;
  margin: 0 auto;
}

.middle {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 16px auto 0 0;
  padding-bottom: 120px;
}

.middle-import-res {
  margin-left: 0;
}

.classifies-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 65px;
  width: 252px;
  cursor: pointer;
}

.classifies-detail img {
  width: 135px;
  height: 135px;
  border-radius: 50%;
}

.classifies-detail span {
  margin-top: 25px;
  font-size: 18px;
  color: #393d49;
}

.classifies-bottom {
  font-size: 18px;
  color: #393d49;
  width: 100%;
  background: #ffffff;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  border-top: 10px solid #eff3f5;
  padding-top: 61px;
  padding-bottom: 30px;
}

.classifies-bottom-span {
  color: #3a8cff;
  margin-left: 20px;
  cursor: pointer;
}

.no-result {
  width: 95%;
  margin: 10% auto 0;
  display: flex;
  align-items: center;
}

.no-result img {
  width: 120px;
  display: block;
  margin: 0 auto;
}

.no-result div {
  width: 100%;
}

.no-result span {
  width: 100%;
  text-align: center;
  display: block;
  font-size: 30px;
  color: rgb(181, 181, 181);
  margin-top: 15px;
}

.introduction-word {
  background: #ffffff;
  border: 1px solid #979797;
  border-radius: 4px;
  font-size: 16px;
  color: #999999;
  padding: 5px;
  text-align: left;
  line-height: 30px;
  position: absolute;
  z-index: 101;
}
</style>
